<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content {
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            margin: 100px auto;
            overflow: hidden;
        }

        .content .title {
            text-align: center;
            margin-top: 20px;
            font-size: 40px;
        }

        .content .name {
            text-align: center;
            margin-top: 30px;
            font-size: 50px;
        }

        .content .foot {
            text-align: center;
            margin-top: 40px;
        }
    </style>
</head>
<body>

    <div class="content">
        <div class="title">随机点名</div>

        <div class="name">XX</div>

        <div class="foot">
            <button class="start">开始</button>
            <button class="end">结束</button>
        </div>
    </div>

<script>
    let nameArr = ["李思凡", "刘发", "强哥", "鼎发", "快换", "推翻去", "孤傲里", "黄素颜"]

    let startBtn = document.querySelector(".start")
    let endBtn = document.querySelector(".end")
    let showname = document.querySelector(".name")

    let randi = 0
    let randIdx = -1
    startBtn.addEventListener("click", function() {
        if (nameArr.length == 0) {
            alert("没有可以点名的同学了！")
            return
        }
        randi = setInterval(function() {
            randIdx = Math.floor(Math.random() * nameArr.length)
            showname.innerHTML = nameArr[randIdx]
        }, 50)
    })

    endBtn.addEventListener("click", function() {
        if (randIdx == -1) {
            alert("请先点击开始！")
            return
        }
        if (nameArr.length == 0) {
            alert("没有可以点的同学了！")
            return
        }

        clearInterval(randi)
        nameArr.splice(randIdx, 1)
    })
</script>
    
</body>
</html>